<template>
    <div class="accidentDailyForm">
        <div class="conditionBox">
            <!-- 时间 -->
            <el-date-picker
                popper-class="eventTimePicker"
                v-model="dateRange"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
            <!-- 类型 -->
            <div class="select">
                <span>类型:</span>
                <div class="type">
                    <el-select
                        popper-class="eventSelect"
                        v-model="eventType"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <span>等级:</span>
                <div class="level">
                    <el-select
                        popper-class="eventSelect"
                        v-model="eventLevel"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in levelOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 区划 -->
            <div class="area">
                <span v-if="$store.state.userRegion=='海南省'">区划:</span>
                <el-select v-model="eventAarea" 
                    placeholder="请选择区划"  v-if="$store.state.userRegion=='海南省'">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                <!-- <el-input v-model="eventAarea"></el-input> -->
                <div class="search" @click="getEventData()">查询</div>
            </div>
        </div>
        <div class="eventBox">
            <div
                :class="{ eventItem: true, activeEvent: currentId === item.id }"
                v-for="(item, index) of eventList"
                :key="index"
                @click="flyTo(item)"
            >
                <span class="eventItemSpan" :title="item.title">
                    <span class="orderNum">{{ index + 1 }}</span>
                    、{{ item.happenUnit }}
                </span>
                <span class="eventTime">
                    {{ item.happenTime }}
                </span>
            </div>
        </div>
        <div class="showReportBtn" @click="handleFormClick()">
            生产安全事故日报
        </div>
    </div>
</template>

<script>
import axios from "axios";
import pointeManager from "../../../pointTFSJ";
import doc from "../../../sjzxDoc";
import viewerInit from "../../../../../cesiumPlugin/viewerInit";
let prodEventModel = [];
export default {
    name: "AccidentDailyForm",
    data() {
        return {
            currentId: 0,
            eventList: [],
            dateRange: null, //时间区间
            eventAarea: "", //行政区划
            eventType: "", //事件行业
            typeOption: [
                { value: "", label: "全部" },
                { value: "农林牧渔业", label: "农林牧渔业" },
                { value: "采矿业", label: "采矿业" },
                { value: "建筑业", label: "建筑业" },
                { value: "交通运输和仓储业", label: "交通运输和仓储业" },
                { value: "其他行业", label: "其他行业" },
            ],
            eventLevel: "", //事件等级
            levelOption: [
                { value: "", label: "全部" },
                { value: "一般事故", label: "一般事故" },
                { value: "较大事故", label: "较大事故" },
            ],
            options: [
                { value: "", label: "全部" },
                { value: "海口市", label: "海口" },
                { value: "万宁市", label: "万宁" },
                { value: "陵水黎族自治县", label: "陵水" },
                { value: "乐东黎族自治县", label: "乐东" },
                { value: "五指山市", label: "五指山" },
                { value: "定安县", label: "定安" },
                { value: "琼中黎族苗族自治县", label: "琼中" },
                { value: "文昌市", label: "文昌" },
                { value: "三亚市", label: "三亚" },
                { value: "琼海市", label: "琼海" },
                { value: "屯昌县", label: "屯昌" },
                { value: "儋州市", label: "儋州" },
                { value: "白沙黎族自治县", label: "白沙" },
                { value: "昌江黎族自治县", label: "昌江" },
                { value: "澄迈县", label: "澄迈" },
                { value: "保亭黎族苗族自治县", label: "保亭" },
                { value: "东方市", label: "东方" },
                { value: "临高县", label: "临高" },
                { value: "三沙市", label: "三沙" },
            ],
        };
    },
    mounted() {
        this.getEventData();
    },
    methods: {
        // 查询数据
        getEventData() {
            let startTime = this.dateRange
                ? `${this.dateRange[0]} 00:00:00`
                : null;
            let endTime = this.dateRange
                ? `${this.dateRange[1]} 00:00:00`
                : null;
            let industryCategory = this.eventType || null;
            let accidentLevel = this.eventLevel || null;
            if(this.$store.state.userRegion=='海南省'){

            }else{
                this.eventAarea = this.$store.state.userRegion
            }
            let xzqh = this.eventAarea || null;
            let pageNum = 1;
            let pageSize = 10000;
            let deathToolGeq = 0;
            let directPecuniaryLossGeq = 0;//经济损失
            axios
                .post(`${sjzxUrl}/api/safeProductDisaster/selectByParam`, {
                    accidentLevel,
                    deathToolGeq,
                    directPecuniaryLossGeq,
                    endTime,
                    industryCategory,
                    pageNum,
                    pageSize,
                    startTime,
                    xzqh
                })
                .then(res => {
                    this.eventList = res.data.data;
                    pointeManager.removePointByType("生产安全事故");
                    pointeManager.createPoint(
                        "生产安全事故",
                        this.eventList,
                        "详情",
                        "leftClick",
                        this.pointHandleClick
                    );
                });
        },
        pointHandleClick(entity) {
            this.addBoundInfoBox(entity.position._value, "infoBox6");
            let obj = {};
            let dic = doc[entity.type];
            // 原顺序
            for (let key in dic) {
                obj[dic[key]] = entity.detail[key];
            }

            this.$store.commit("changeInfoBoxContent", obj);
            window.eventId = entity.id;
        },
        addBoundInfoBox(positionValue, elementId) {
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let preRenderListener = viewer.scene.preRender.addEventListener(
                function() {
                    let elWidth = oneDiv.offsetWidth;
                    let elHeight = oneDiv.offsetHeight; // + 60
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
                        position,
                        scratch
                    ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
                }
            );
        },
        flyTo(item) {
            if(item.lon==null){
                this.$message({
                    type: "error",
                    message: "坐标信息完善中，暂无法定位",
                });
            }else{
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(
                        item.lon,
                        item.lat,
                        20000
                    ),
                });
            }
           
            this.currentId = item.id;
        },
        // 显示报告
        handleFormClick() {
            this.$store.commit("changeDangerDayForm", "内容");
        },
        // 数据上球
        dataToEarth(data) {
            prodEventModel.forEach(ele => {
                viewer.entities.remove(ele);
            });
            data.forEach(item => {
                if (item.lon && item.lat) {
                    let entity = viewer.entities.add({
                        name: item.id + item.accidentNo,
                        id: item.id + item.accidentNo,
                        position: Cesium.Cartesian3.fromDegrees(
                            item.lon,
                            item.lat
                        ),
                        billboard: {
                            // image: `./images/fireIcon/caodi.png`,
                            image: `./images/sjzx/icons/生产安全事故.png`,
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            heightReference:
                                Cesium.HeightReference.CLAMP_TO_GROUND,
                            width: 30,
                            height: 30,
                            scaleByDistance: new Cesium.NearFarScalar(
                                10000,
                                1.5,
                                100000,
                                1
                            ),
                            disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        },
                        entityType: "prodEvent",
                    });
                    prodEventModel.push(entity);
                }
            });
        },
    },
    beforeUnmount() {
        pointeManager.removePointByType("生产安全事故");
        prodEventModel.forEach(ele => {
            viewer.entities.remove(ele);
        });
    },
};
</script>

<style lang="stylus">
.accidentDailyForm {
    .el-date-editor .el-range-input{
        color:#fff;
    }
    .el-range-editor.el-input__inner, .el-date-editor .el-range-input {
        width: 100%;
        height: 30px;
        background: transparent;
    }

    .el-range-separator {
        color: #fff;
        height: unset;
    }

    .el-input__inner {
        height: 30px;
    }

    .el-select-dropdown__item span {
        color: #000;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .el-input__suffix, .el-input__icon {
        line-height: 30px;
    }

    .el-select {
        flex: 1;
    }
}
.eventSelect {
    .el-select-dropdown__item {
        text-align: center;

        span {
            color: #000;
        }
    }
}

.eventTimePicker {
    .el-date-range-picker__content .el-date-range-picker__header div, .el-date-table td span {
        color: #000;
    }
}
</style>
<style lang="stylus">
.accidentDailyForm {
    // background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: calc(100% - 65px);
    // margin-top: vh(30);
    display: flex;
    flex-direction: column;
    .conditionBox {
        padding: 5px;
        .area, .type, .level {
            display: flex;
            justify-content: space-between;
            align-items: center;

            >span {
                width: 90px;
            }

            .search {
                width: 60px;
                height: 28px;
                line-height: 28px;
                margin-left: 10px;
                border: 1px solid #17d0ff;
                text-align: center;
                cursor: pointer;
                font-size: 16px;
            }
        }

        .select {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top:vh(3);
            .type, .level {
                width: 30%;
            }
        }
    }

    .eventBox {
        flex: 1;
        overflow: auto;
        .eventItem {
            margin: 0px 10px 5px 10px;
            text-align: left;
            overflow-y: scroll;
            color: #000;
            overflow: hidden; // 高度塌陷
            cursor: pointer;
            line-height: 25px;
            font-size: 14px;
            padding:5px;
            // border-bottom: 1px dashed #eee;
            background:rgba(0,0,0,.3);
            .eventItemSpan {
                .orderNum {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    background: #1296DB;
                    text-align: center;
                }
            }

            span.eventTime {
                float: right;
                line-height: 20px;
            }
        }

        .activeEvent span, .eventItem:hover span {
            color: #E2AE14;
        }
    }

    .showReportBtn {
        width: 50%;
        height: vh(30);
        line-height: vh(30);
        text-align: center;
        cursor: pointer;
        border:1px solid #40BBF1;
        top:-40px;
        border-radius:5px;
        margin-left:vw(10);
    }
}
</style>
